import Decorate from './components/decorate/index.vue'
import Guide from './components/guide/index.vue'
import Next from './components/next/index.vue'
import Music from './components/music/index.vue'
import Pause from './components/pause/index.vue'
import Number from './components/number/index.vue'
import Point from './components/point/index.vue'
import Keyboard from './components/keyboard/index.vue'
import Logo from './components/logo/index.vue'
import Matrix from './components/matrix/index.vue'
import { mapGetters, mapState } from 'vuex'
import { lastRecord, speeds, i18n, lan } from './unit/const'
import { visibilityChangeEvent, isFocus } from './unit/'
import states from './control/states'
import './unit/const'
import GTimer from '@/components/GTimer'
export default {
  mounted() {
    this.render()
  },
  data() {
    return {
      size: {},
      w: window.innerWidth,
      h: window.innerHeight,
      filling: '',
      rpxRatio: 2
    }
  },
  components: {
    Decorate,
    Guide,
    Next,
    Music,
    Pause,
    Number,
    Point,
    Logo,
    Keyboard,
    Matrix,
    GTimer
  },
  computed: {
    pContent() {
      return this.cur ? i18n.cleans[lan] : i18n.startLine[lan]
    },
    level: () => i18n.level[lan],
    nextText: () => i18n.next[lan],
    ...mapState('tetris', [
      'matrix',
      'keyboard',
      'music',
      'pause',
      'next',
      'cur',
      'speedStart',
      'speedRun',
      'startLines',
      'clearLines',
      'points',
      'max',
      'reset',
      'drop'
    ]),
    ...mapGetters(['system'])
  },
  created() {
    const { windowHeight, windowWidth } = this.system
    this.w = windowWidth
    this.h = windowHeight
    this.rpxRatio = 750 / this.w
    console.log(this.w, this.h, this.rpxRatio, 'tetris')
  },
  onUnload() {
    this.reload()
  },
  methods: {
    render() {
      let filling = 0
      const size = (() => {
        const w = this.w
        const h = this.h
        const ratio = h / w
        let scale
        let css = {}
        if (ratio < 1.5) {
          scale = h / 960 * this.rpxRatio
        } else {
          scale = w / 640 * this.rpxRatio
          filling = (h - 960 / this.rpxRatio * scale) / scale / 1.5
          css = {
            'padding-top': Math.floor(filling) + 42 + 'rpx',
            'padding-bottom': Math.floor(filling) + 'rpx',
            'margin-top': Math.floor(-480 - filling * 1.5) + 'rpx'
          }
        }
        css['transform'] = `scale(${scale})`
        return css
      })()
      this.size = size
      this.start()
      this.filling = filling
    },
    start() {
      if (visibilityChangeEvent) {
        // 将页面的焦点变换写入store
        document.addEventListener(
          visibilityChangeEvent,
          () => {
            states.focus(isFocus())
          },
          false
        )
      }

      if (lastRecord) {
        // 读取记录
        if (lastRecord.cur && !lastRecord.pause) {
          // 拿到上一次游戏的状态, 如果在游戏中且没有暂停, 游戏继续
          const speedRun = this.$store.state.tetris.speedRun
          let timeout = speeds[speedRun - 1] / 2 // 继续时, 给予当前下落速度一半的停留时间
          // 停留时间不小于最快速的速度
          timeout =
            speedRun < speeds[speeds.length - 1]
              ? speeds[speeds.length - 1]
              : speedRun
          states.auto(timeout)
        }

        if (!lastRecord.cur) {
          states.overStart()
        }
      } else {
        states.overStart()
      }
    },
    reload() {
      clearTimeout(states.fallInterval)
      this.$store.commit('tetris/resetState')
    }
  }
}
